<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import toolbarKeys from '@/assets/json/toolbar'
import '@wangeditor/editor/dist/css/style.css'
import { apiSave, apiModify } from '@/api/paper'

export default {
  name: 'DocumentDesigner',
  components: {
    Editor,
    Toolbar
  },
  data() {
    return {
      documentText: '',
      currentId: null,
      instance: null,
      defaultConfig: {
        placeholder: '请输入……',
        autoFocus: true
      },
      toolbarConfig: {
        toolbarKeys,
      }
    }
  },
  beforeDestroy() {
    if(this.instance){
      this.instance.destroy()
    }
  },
  mounted() {

  },
  methods: {
    handleEditorCreate(editor) {
      this.instance = Object.seal(editor)
      const that = this
      if(this.$route.query) {
        if(this.$route.query['type'] === 'modify') {
          const modified = JSON.parse(sessionStorage.getItem('modifiedHtml'))
          this.documentText = modified['testPaperContent']
          this.currentId = modified['id']
        }
      }
      window.getCurrentHtml = () => {
        return this.instance.getHtml()
      }
    },
    handleSave() {
      if(this.$route.query) {
        if(this.$route.query['type'] === 'modify') {
          apiModify(this.documentText, this.currentId).then((res) => {
            if(res.code === 200) {
              this.$message.success('操作成功')
              this.$router.push('/paper/paperList')
            } else {
              this.$message.warning(res.msg)
            }
          })
        }
      } else {
        this.$prompt('请输入表单标题', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({ value }) => {
          apiSave(this.documentText, value).then(res => {
            if(res.code === 200) {
              this.$message.success('操作成功')
              this.$router.push('/paper/paperList')
            } else {
              this.$message.warning(res.msg)
            }
          })
        })
      }
    },
    handleReset() {
      this.$confirm('是否重置当前文档?', '询问', {
        confirmButtonText: '重置',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.instance.setHtml('<p><br></p>')
      })
    }
  }
}
</script>

<template>
  <div class="component-document-designer-container">
    <div class='tool'>
      <el-button size='small' type='primary' @click='handleSave'>保存</el-button>
      <el-button size='small' @click='handleReset'>重置</el-button>
    </div>
    <toolbar :editor="instance" :defaultConfig="toolbarConfig" mode="default" style="border-bottom: 1px solid #ccc" />
    <editor v-model="documentText"
            :defaultConfig="defaultConfig"
            style="height: calc(100% - 81px);"
            mode="default"
            @onCreated="handleEditorCreate" />
  </div>
</template>

<style lang="scss">
.component-document-designer-container {
  height: 100%;

  .tool {
    display: flex;
    align-items: center;
    padding: 8px 12px;
  }
}
</style>
